import { defineConfig, presetAttributify, presetWind3, transformerDirectives, transformerVariantGroup } from "unocss";
import presetRemToPx from "@unocss/preset-rem-to-px";
import unocssColors from "element-plus-theme/unocss-var";

export default defineConfig({
  content: {
    pipeline: {
      include: [/\.(vue|svelte|[jt]sx|mdx?|html)($|\?)/],
    },
  },
  theme: {
    colors: { ...unocssColors },
  },
  presets: [presetWind3(), presetAttributify(), presetRemToPx({ baseFontSize: 16 })],
  shortcuts: [
    { full: "w-full h-full" },
    { center: "flex justify-center items-center" },
    { nowrap: "flex flex-nowrap items-center" },
    { between: "justify-between" },
    { col: "flex flex-col" },
    { "col-center": "flex flex-col items-center" },
    { "flex-full": "flex w-full h-full" },
    { border: "border-1px border-solid" },
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});
